<template>
    <div class="coupon-list">
        <nav-bar :title="title"></nav-bar>
        <div class="coupon-item" v-for="item in couponList" :key="item.storeActivity.id">
            <div class="store-img">
                <img :src="item.store.img">
            </div>

            <div class="coupon-info">
                <div>{{ item.store.name }}</div>
                <div>({{ item.storeActivity.startTime }} - {{ item.storeActivity.endTime }})</div>

                <div class="price">{{ item.storeActivity.discountAmount }}￥</div>
            </div>

            <div class="coupon-button" @click="tryGetCoupon(item.storeActivity.id)">
                领取
            </div>
        </div>
    </div>
</template>

<script>
import NavBar from '@/components/navbar/NavBar.vue'
import CouponAPI from '@/api/coupon'
    export default{
        components: { NavBar },

        data(){
            return{
                title: "优惠劵秒杀活动",
                couponList: [],
            }
        },
        created(){
            this.getCoupon()
        },
        methods:{
            getCoupon(){
                let longitude = this.$store.state.location.longitude
                let latitude = this.$store.state.location.latitude
                let data = {
                    longitude,
                    latitude
                }
                CouponAPI.getStoreActivityByNearby(data)
                .then(res => {
                    if(res.code == 200){
                        this.couponList = res.data.couponList
                    }
                })
            },
            tryGetCoupon(activityId){
                let data = {
                    activityId,
                }

                CouponAPI.addUserStoreActivity(data)
                .then(res => {
                    if(res.code == 200){
                        this.$toast(res.message)
                    }else this.$toast(res.message)
                })
            }
        }
    }
</script>

<style scoped>

    .coupon-item{
        display:flex;
        justify-content: space-around;
        align-items: center;;

        width:90%;
        margin:auto;
        margin-top:10px;

        background-color:white;
        border-radius: 8px;

        padding:10px;
    }
    .store-img img{
        width: 50px;
        height: 50px;
    }

    .coupon-info{
        text-align:center;
    }

    .coupon-info .price{
        font-size:22px;
    }
</style>